<template>
  <div class="ranking">
    <div class="ranking_inner clearfix">
      <div class="ranking_type">
        <ul>
          <li v-for="(list,index1) in recommend.toplist.data.group" :key="index1">
            <div class="type_title">{{list.groupName}}</div>
            <ul class="type_ul">
              <li v-show="item.topId!=201" :class="{select:item.topId===parseInt($route.params.id)}" v-for="(item,index) in list.toplist" :key="index" @click="getTopId(item.topId)">
                <span>{{item.title}}</span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="ranking_detail">
        <div class="title">
          <span>{{topList.list_name}}</span>
          <span>{{topList.update_time}}</span>
          <span @click="showRule=!showRule">榜单规则</span>
          <div class="rule" v-show="showRule" v-html="topList.list_info"></div>
        </div>
        <div class="more">
          <div class="other_play">
            <span class="iconfont icon-bofangsanjiaoxing"></span>
            <span>播放全部</span>
          </div>
          <div class="other_add">
            <span class="iconfont icon-tianjia"></span>
            <span>添加到</span>
          </div>
          <div class="other_download">
            <span class="iconfont icon-xiazai"></span>
            <span>下载</span>
          </div>
          <div class="other_opt">
            <span class="iconfont icon-piliang-copy"></span>
            <span>批量操作</span>
          </div>
          <div class="other_comment">
            <span class="iconfont icon-pinglun"></span>
            <span>评论(27091)</span>
          </div>

        </div>
        <table class="Song_info">
          <tr>
            <th></th>
            <th>歌曲</th>
            <th>歌手</th>
            <th>时长</th>
          </tr>
          <tr v-for="(item,index) in list">
            <td>
              <span>{{index+1}}</span>
            </td>
            <td>
              <div class="img">
                <img :src="baseUrl+item.album_mid+'.jpg'" alt="">
              </div>
              <div class="songName" @click="getSong(item.song_mid,item.song_id)">{{item.song_name}}</div>
              <span class="is_mv" v-show="item.mv_mid.length">MV</span>
              <span class="is_vip" v-show="item.is_pay">VIP</span>
              <div class="more">
                <span class="iconfont icon-bofangsanjiaoxing"></span>
                <span class="iconfont icon-jia"></span>
                <span class="iconfont icon-xiazai"></span>
                <span class="iconfont icon-zhuanfa"></span>
              </div>
            </td>
            <td class="ellipsis">
                <span v-for="(singer,index) in item.singers" :key="index" @click="toSingerDetail(singer.mid)">
                  {{singer.name}}
                  <span>
                    {{index===item.singers.length-1?'':'/'}}
                  </span>
                </span>

            </td>
            <td>{{item.interval_str}}</td>
          </tr>

        </table>
      </div>
    </div>
  </div>

</template>

<script>
    import {mapState} from 'vuex'
    let that={}
    export default {
        name: "Ranking",
        data(){
          return{
            showRule:false,
            list:[],
            baseUrl:'http://y.gtimg.cn/music/photo_new/T002R150x150M000',
            group:[],
          }
        },
        computed:{
          ...mapState(['recommend','topList']),
        },
        methods:{
          getTopId(id){
            this.$store.dispatch('changeTopId',id);
            this.$store.dispatch('getTopList',id);
            // console.log(this.$route.params.id,id);
            if(parseInt(this.$route.params.id)!==id){//使用全等运算符，需要将前者字符串转化为数字类型
              this.$router.replace('/ranking/'+id);
            }
          },
          toSingerDetail(mid){
            this.$router.replace(`/singerdetail/${mid}`);
          },
          getSong(song_mid,song_id){
            this.$router.replace({path:'/songDetail',query:{song_mid,song_id}})
          },
        },
        mounted(){
          that=this;
          this.$store.dispatch('getTopList',this.$route.params.id);
        },
        watch:{
          recommend:{
            handler:(value)=>{
              that.group=value.toplist.data.group;
            },
            deep:true
          },
          topList(value){
            this.list=[];
            for(let i=0;i<20;i++){
              this.list.push(value.song_list[i]);
            }
          }
        }
    }
</script>

<style scoped lang="less">
   .ranking{ width:100%;background:#fafafa;margin: 0 auto;position:relative;}
   .ranking .ranking_inner{width: 1200px;margin: 0 auto;padding:60px 0px;}
   .ranking .ranking_type{float: left;width: 180px;border: 1px solid #e9e9e9;margin-right: 30px;}
   .ranking .ranking_type .type_title{font-size:22px;border-bottom: 1px solid #e9e9e9;margin: 20px 18px;padding-bottom: 22px}
   .ranking .ranking_type .type_ul{margin: 10px 0px;}
   .ranking .ranking_type .type_ul>li{line-height: 2.5;padding-left: 18px;cursor: pointer}
   .ranking .ranking_type .type_ul>li.select{ background-color: #31c27c;color: white;}

   .ranking .ranking_detail .title{position:relative;margin: 20px 0px;}
   .ranking .ranking_detail .title>span{margin-right: 13px}
   .ranking .ranking_detail .title>span:nth-child(1){font-size: 25px}
   .ranking .ranking_detail .title>span:nth-child(2){vertical-align: 4px}
   .ranking .ranking_detail .title>span:nth-child(3){vertical-align: 4px}
   .ranking .ranking_detail .title>span:nth-child(3):hover{color: #2caf6f;cursor: pointer}
   .ranking .ranking_detail .title .rule{
     position: absolute;
     z-index: 2;
     width: 400px;
     box-shadow: 1px 1px  10px #ccc;
     border-radius: 10px;
     background-color: white;
     padding: 20px;
     line-height: 1.5;
     display: inline-block;
     top: 45px;
     left: 130px;
     font-size: 13px;
     box-sizing: border-box;
     &:before{
       content: '';
       display: inline-block;
       width: 16px;
       height: 16px;
       position: absolute;
       background-color: #fff;
       top: -7px;
       right: 50%;
       margin-right: -8px;
       box-shadow: 1px 1px 10px #ccc;
       transform: rotate(46deg);
     }
     &:after{
       content: "";
       display: inline-block;
       width: 54px;
       height: 21px;
       position: absolute;
       top: 0;
       right: 44%;
       background-color: #fff;
     }
   }

   .ranking .ranking_detail .more{margin-top: 39px;margin-bottom: 20px}
   .ranking .ranking_detail .more>div{display: inline-block;margin-right: 6px;padding: 8px 18px;box-sizing: border-box;}
   .ranking .ranking_detail .more .other_play{color: white;background: #31c27c;padding: 9px 18px;}
   .ranking .ranking_detail .more .other_play:hover{background:#2caf6f ;cursor: pointer}
   .ranking .ranking_detail .more>div:nth-child(n+2){border: 1px solid #c9c9c9;}
   .ranking .ranking_detail .more>div:nth-child(n+2):hover{background: #ededed;cursor: pointer}

   .ranking  .Song_info{text-align:left;font-size: 14px;margin-bottom: 50px;}
    .ranking  .Song_info tr:first-child{height: 50px;line-height: 50px;}
    .ranking  .Song_info tr {height: 80px;line-height: 80px;}
    .ranking  .Song_info tr th{color: #999;}
    .ranking  .Song_info tr:nth-child(2n+1){background: #fbfbfd;}
    .ranking  .Song_info tr td:nth-child(1){width: 119px;padding-left: 24px;box-sizing: border-box;color: #999;}
    .ranking  .Song_info tr td:nth-child(1)>span:nth-child(1){font-size: 20px;}
    .ranking  .Song_info tr:nth-child(2) td:nth-child(1)>span:nth-child(1){color: #ff5c4c}
    .ranking  .Song_info tr:nth-child(3) td:nth-child(1)>span:nth-child(1){color: #ff5c4c}
    .ranking  .Song_info tr:nth-child(4) td:nth-child(1)>span:nth-child(1){color: #ff5c4c}
    .ranking  .Song_info tr td:nth-child(1)>div{display: flex;flex-direction: column;justify-content: center;line-height: 1;float: right;margin-right: 28px;margin-top: 28px;}
    .ranking  .Song_info tr td:nth-child(2){width: 788px;position: relative;}
    .ranking  .Song_info tr td:nth-child(2) .img{margin-right: 19px;cursor: pointer}
    .ranking  .Song_info tr td:nth-child(2) .img img{width: 70px;height: 70px;vertical-align: -30px;}
    .ranking  .Song_info tr td:nth-child(2) .songName:hover{color: #31c27c;cursor: pointer;}
    .ranking  .Song_info tr td:nth-child(2)>span{border: 1px solid #31c27c;color: #31c27c;margin: 0 4px;padding: 0 6px;border-radius: 5px;font-size: 12px;}
    .ranking  .Song_info tr td:nth-child(2) .more{position: absolute;top:0;bottom: 0;margin: auto 0;right: 10px;}
    .ranking  .Song_info tr td:nth-child(2) .more>span{display: inline-block;width: 35px;height: 35px;border: 1px solid #d4d4d4;text-align: center;line-height: 35px;border-radius: 50%;color: #999;margin-right: 5px;}
    .ranking  .Song_info tr td .more{opacity: 0;}
    .ranking  .Song_info tr:hover td div.more{opacity: 1;}
    .ranking  .Song_info tr:hover td div.more>span:hover{border-color: #31c27c;color: #31c27c;}
    .ranking  .Song_info tr td:nth-child(3){width: 207px;display: block}
    .ranking  .Song_info tr td:nth-child(3)>span:hover{color: #31c27c;cursor: pointer;}
   .ranking  .Song_info tr td:nth-child(3)>span:hover>span{color:#000}
   .ranking  .Song_info tr td:nth-child(4){width: 86px;color: #999;}
    .ranking  .Song_info tr td>div{display: inline-block;}
</style>
